/* =============================================================================
   Wco. — Custom Theme Override for WHMCS Twenty-One
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --wco-black:  #0a0a0a;
  --wco-white:  #f5f4f0;
  --wco-accent: #ff4d2e;
  --wco-acc-h:  #e03c1f;
  --wco-mid:    #e2e0da;
  --wco-card:   #edeae4;
  --wco-muted:  #999;
}

html { font-size: 15px !important; }
body, body.primary-bg-color { font-family:'Inter',sans-serif !important; background:var(--wco-white) !important; color:var(--wco-black) !important; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important; letter-spacing:-.01em !important; line-height:1.06 !important; }

/* NAV Wco. */
/* Masquer les éléments Twenty-One dans le header */
#header .topbar,
#header .navbar { display:none !important; }
#header { background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }

/* Topbar */
#wco-topbar { background:#edeae4; border-bottom:1px solid #e2e0da; padding:.28rem 0; font-size:.72rem; color:#999; }
#wco-topbar .wco-topbar-right { display:flex; gap:1rem; margin-left:auto; }
#wco-topbar a { color:#999 !important; text-decoration:none !important; }
#wco-topbar a:hover { color:#0a0a0a !important; }

/* Nav principale */
#wco-nav { background:#f5f4f0; border-bottom:1.5px solid #e2e0da; height:60px; position:sticky; top:0; z-index:1050; }
.wco-wrap { max-width:1140px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; }
#wco-logo { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.8rem; letter-spacing:-.03em; color:#0a0a0a !important; text-decoration:none !important; line-height:1; flex-shrink:0; opacity:1 !important; }
#wco-logo span { color:#ff4d2e !important; }
#wco-links { display:flex; gap:1.3rem; list-style:none; margin:0; padding:0; align-items:center; }
#wco-links a { font-size:.875rem; font-weight:500; color:#0a0a0a !important; text-decoration:none !important; opacity:.5; transition:opacity .2s; }
#wco-links .wco-btn-outline { color:#0a0a0a !important; opacity:1 !important; }
#wco-links a:hover { opacity:1 !important; }
.wco-btn-outline { padding:.35rem .9rem; border-radius:6px; border:1.5px solid #e2e0da; opacity:1 !important; transition:border-color .2s !important; }
.wco-btn-outline:hover { border-color:#0a0a0a !important; }
.wco-btn-solid { background:#0a0a0a !important; color:#f5f4f0 !important; padding:.35rem 1rem; border-radius:6px; opacity:1 !important; transition:background .2s !important; font-weight:500; font-size:.82rem; text-decoration:none !important; display:inline-block; }
.wco-btn-solid:hover { background:#ff4d2e !important; }
#wco-cart { position:relative; font-size:1.1rem; opacity:.6 !important; }
#wco-cart-badge { position:absolute; top:-6px; right:-8px; background:#ff4d2e; color:#fff; font-size:.5rem; font-weight:700; min-width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 2px; }
.master-breadcrumb { background:var(--wco-white) !important; border-bottom:1px solid var(--wco-mid) !important; padding:.6rem 0 !important; }
.master-breadcrumb .breadcrumb { background:transparent !important; margin:0 !important; padding:0 !important; font-size:.78rem !important; }
.master-breadcrumb .breadcrumb-item a { color:var(--wco-muted) !important; }
.master-breadcrumb .breadcrumb-item.active { color:var(--wco-black) !important; }
.master-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:var(--wco-muted) !important; }
#main-body { background:var(--wco-white) !important; padding-top:0 !important; }
#main-body>.container { padding-top:2rem !important; padding-bottom:3rem !important; }

/* BUTTONS */
.btn-primary,.btn-primary:focus { background:var(--wco-black) !important; border-color:var(--wco-black) !important; color:var(--wco-white) !important; font-family:'Inter',sans-serif !important; font-weight:500 !important; border-radius:8px !important; padding:.6rem 1.4rem !important; box-shadow:none !important; transition:background .2s,transform .15s !important; }
.btn-primary:hover { background:var(--wco-accent) !important; border-color:var(--wco-accent) !important; transform:translateY(-1px) !important; }
.btn-default,.btn-secondary { background:transparent !important; border:1.5px solid var(--wco-mid) !important; color:var(--wco-black) !important; font-family:'Inter',sans-serif !important; font-weight:500 !important; border-radius:8px !important; padding:.6rem 1.4rem !important; box-shadow:none !important; }
.btn-default:hover { border-color:var(--wco-black) !important; background:transparent !important; color:var(--wco-black) !important; }
.btn-danger { background:var(--wco-accent) !important; border-color:var(--wco-accent) !important; border-radius:8px !important; }
.btn-success { background:#43a047 !important; border-color:#43a047 !important; border-radius:8px !important; }
.btn-link { color:var(--wco-accent) !important; }
.btn-sm { padding:.38rem .9rem !important; font-size:.78rem !important; }
.btn-lg { padding:.8rem 2rem !important; font-size:1rem !important; }

/* FORMS */
.form-control,input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea { font-family:'Inter',sans-serif !important; font-size:.88rem !important; background:var(--wco-card) !important; border:1.5px solid var(--wco-mid) !important; border-radius:8px !important; color:var(--wco-black) !important; box-shadow:none !important; padding:.6rem .9rem !important; height:auto !important; }
.form-control:focus,input:focus,select:focus,textarea:focus { border-color:var(--wco-accent) !important; box-shadow:none !important; background:var(--wco-card) !important; }
.form-control-label,label { font-size:.72rem !important; font-weight:600 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:#666 !important; margin-bottom:.35rem !important; }
.input-group-text { background:var(--wco-card) !important; border:1.5px solid var(--wco-mid) !important; color:var(--wco-muted) !important; }
.form-text,.text-muted { color:var(--wco-muted) !important; font-size:.75rem !important; }
.is-invalid { border-color:var(--wco-accent) !important; }
.invalid-feedback { color:var(--wco-accent) !important; }

/* CARDS */
.card { background:var(--wco-white) !important; border:1.5px solid var(--wco-mid) !important; border-radius:12px !important; box-shadow:0 2px 12px rgba(10,10,10,.07) !important; }
.card-header { background:transparent !important; border-bottom:1.5px solid var(--wco-mid) !important; font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important; font-size:1.2rem !important; padding:1rem 1.4rem !important; }
.card-title { font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important; font-size:1.3rem !important; }
.card-body { padding:1.4rem !important; }
.card-footer { background:var(--wco-card) !important; border-top:1.5px solid var(--wco-mid) !important; padding:1rem 1.4rem !important; border-radius:0 0 12px 12px !important; }

/* TABLES */
.table { font-size:.85rem !important; }
.table thead th { background:var(--wco-black) !important; color:var(--wco-white) !important; font-size:.65rem !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important; border:none !important; padding:.75rem 1rem !important; }
.table td { padding:.85rem 1rem !important; border-bottom:1px solid var(--wco-mid) !important; vertical-align:middle !important; border-top:none !important; }
.table tbody tr:hover td { background:var(--wco-card) !important; }
.table-responsive,.table-bordered { border:1.5px solid var(--wco-mid) !important; border-radius:10px !important; overflow:hidden !important; }

/* ALERTS */
.alert { font-size:.88rem !important; border-radius:8px !important; padding:.85rem 1.1rem !important; border-left-width:3px !important; border-right:none !important; border-top:none !important; border-bottom:none !important; }
.alert-success { background:#e8f5e9 !important; border-color:#43a047 !important; color:#1b5e20 !important; }
.alert-danger  { background:#fdecea !important; border-color:var(--wco-accent) !important; color:#7f0000 !important; }
.alert-warning { background:#fff8e1 !important; border-color:#f9a825 !important; color:#e65100 !important; }
.alert-info    { background:#e3f2fd !important; border-color:#1976d2 !important; color:#0d47a1 !important; }

/* BADGES */
.badge { font-size:.6rem !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; padding:.18rem .5rem !important; border-radius:4px !important; }
.badge-success { background:#43a047 !important; color:#fff !important; }
.badge-danger  { background:var(--wco-accent) !important; color:#fff !important; }
.badge-warning { background:#f9a825 !important; color:#fff !important; }
.badge-info    { background:#1976d2 !important; color:#fff !important; }
.badge-secondary,.badge-default { background:var(--wco-card) !important; color:var(--wco-black) !important; border:1px solid var(--wco-mid) !important; }
.badge-primary { background:var(--wco-black) !important; color:#fff !important; }

/* PAGINATION */
.pagination .page-link { border:1.5px solid var(--wco-mid) !important; color:var(--wco-black) !important; background:var(--wco-white) !important; border-radius:6px !important; margin:0 2px !important; }
.pagination .page-item.active .page-link,.pagination .page-link:hover { background:var(--wco-black) !important; color:var(--wco-white) !important; border-color:var(--wco-black) !important; }

/* MODALS */
.modal-content { border:1.5px solid var(--wco-mid) !important; border-radius:14px !important; box-shadow:0 8px 40px rgba(0,0,0,.12) !important; }
.modal-header { border-bottom:1.5px solid var(--wco-mid) !important; }
.modal-title { font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important; font-size:1.3rem !important; }
.modal-footer { border-top:1.5px solid var(--wco-mid) !important; }

/* SIDEBAR */
.sidebar .list-group-item { border:none !important; border-radius:8px !important; font-size:.88rem !important; font-weight:500 !important; color:var(--wco-black) !important; padding:.6rem .9rem !important; margin-bottom:2px !important; }
.sidebar .list-group-item:hover { background:var(--wco-card) !important; }
.sidebar .list-group-item.active { background:var(--wco-black) !important; color:var(--wco-white) !important; }
.sidebar .card { border:none !important; box-shadow:none !important; background:transparent !important; }
.sidebar .card-header { font-size:.65rem !important; letter-spacing:.1em !important; color:var(--wco-muted) !important; background:transparent !important; border-bottom:1.5px solid var(--wco-mid) !important; }

/* TABS */
.nav-tabs { border-bottom:1.5px solid var(--wco-mid) !important; }
.nav-tabs .nav-link { font-size:.85rem !important; font-weight:500 !important; color:var(--wco-muted) !important; border:none !important; border-bottom:2px solid transparent !important; border-radius:0 !important; padding:.5rem .9rem !important; }
.nav-tabs .nav-link:hover { color:var(--wco-black) !important; background:transparent !important; }
.nav-tabs .nav-link.active { color:var(--wco-black) !important; border-bottom-color:var(--wco-accent) !important; background:transparent !important; font-weight:600 !important; }

/* TILES */
.tiles .tile { background:var(--wco-white) !important; border:1.5px solid var(--wco-mid) !important; border-radius:12px !important; transition:border-color .2s,transform .15s !important; color:var(--wco-black) !important; }
.tiles .tile:hover { border-color:var(--wco-accent) !important; transform:translateY(-2px) !important; }
.tiles .tile .tile-icon i { color:var(--wco-accent) !important; }

/* LOGIN */
.login-form .card { max-width:460px !important; margin:3rem auto !important; border-radius:16px !important; }
.login-form .card-body { padding:2.5rem !important; }
.login-form .card-footer { text-align:center !important; }
.login-form .h3,.login-form h3 { font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important; font-size:1.8rem !important; }

/* FOOTER */
#footer { background:var(--wco-white) !important; border-top:1.5px solid var(--wco-mid) !important; margin-top:3rem !important; }
#footer .nav-link { color:var(--wco-muted) !important; font-size:.82rem !important; }
#footer .nav-link:hover { color:var(--wco-black) !important; }
#footer .copyright { font-size:.72rem !important; color:var(--wco-muted) !important; }

/* PANELS */
.panel,.panel-default { border:1.5px solid var(--wco-mid) !important; border-radius:12px !important; }
.panel-heading { background:transparent !important; border-bottom:1.5px solid var(--wco-mid) !important; font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important; }

/* MISC */
a { color:var(--wco-accent) !important; }
#wco-logo { color:#0a0a0a !important; }
#wco-logo span { color:#ff4d2e !important; }
.wco-login-logo { color:#0a0a0a !important; }
.wco-login-logo span { color:#ff4d2e !important; }
a:hover { opacity:.8 !important; text-decoration:none !important; }
a.btn,a.btn:hover,.btn,.btn:hover { opacity:1 !important; }
.text-success { color:#43a047 !important; }
.text-danger  { color:var(--wco-accent) !important; }
.text-primary { color:var(--wco-black) !important; }
.text-muted   { color:var(--wco-muted) !important; }
hr { border-color:var(--wco-mid) !important; }
code,pre { font-family:'JetBrains Mono',monospace !important; background:var(--wco-card) !important; border:1px solid var(--wco-mid) !important; border-radius:6px !important; }
.progress-bar { background:var(--wco-accent) !important; }
.custom-control-input:checked~.custom-control-label::before { background:var(--wco-accent) !important; border-color:var(--wco-accent) !important; }
.dropdown-menu { border:1.5px solid var(--wco-mid) !important; border-radius:10px !important; padding:.4rem !important; }
.dropdown-item { border-radius:6px !important; font-size:.85rem !important; }
.dropdown-item:hover { background:var(--wco-card) !important; color:var(--wco-black) !important; }
.dropdown-item.active { background:var(--wco-black) !important; color:#fff !important; }

@media(max-width:768px){
  #main-body>.container { padding-top:1rem !important; }
  .card-body { padding:1rem !important; }
}

/* Fix input-group icons alignment */
.input-group { flex-wrap:nowrap !important; }
.input-group-prepend { display:flex !important; }
.input-group-prepend .input-group-text {
  border-radius:8px 0 0 8px !important;
  border-right:none !important;
  height:auto !important;
  padding:.6rem .9rem !important;
}
.input-group > .form-control {
  border-radius:0 8px 8px 0 !important;
  border-left:none !important;
}
.input-group-append { display:flex !important; }
.input-group-append .btn,
.input-group-append .input-group-text {
  border-radius:0 8px 8px 0 !important;
  border-left:none !important;
}
.input-group-merge .form-control { border-radius:0 8px 8px 0 !important; }

/* Fix input-group icon alignment - définitif */
.input-group { position:relative; display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; width:100%; }
.input-group > .form-control { position:relative; flex:1 1 auto !important; width:1%; min-width:0; }
.input-group-prepend,
.input-group-append { display:flex !important; align-items:center !important; }
.input-group-prepend .input-group-text {
  display:flex !important;
  align-items:center !important;
  padding:.6rem .85rem !important;
  font-size:.88rem !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  color:var(--wco-muted) !important;
  background:var(--wco-card) !important;
  border:1.5px solid var(--wco-mid) !important;
  border-right:none !important;
  border-radius:8px 0 0 8px !important;
  white-space:nowrap !important;
}
.input-group-append .btn,
.input-group-append .input-group-text {
  border-left:none !important;
  border-radius:0 8px 8px 0 !important;
}
.input-group > .form-control:not(:first-child) {
  border-left:none !important;
  border-radius:0 8px 8px 0 !important;
}
.input-group > .form-control:not(:last-child) {
  border-right:none !important;
  border-radius:8px 0 0 8px !important;
}
.input-group > .form-control:only-child {
  border-radius:8px !important;
}
/* Fix height pour que l'icône soit bien centrée */
.input-group-prepend .input-group-text i,
.input-group-prepend .input-group-text svg { font-size:.85rem; line-height:1; }